<template>
  <div class="mineInformationBox">
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      <span>{{userId?'编辑地址':'新增地址'}}</span>
      <div slot="right" class="rightBox">删除</div>
    </x-header>
    <group class="contBox">
      <x-input
        title="姓名"
        v-model="user.name"
        name="username"
        placeholder="请输入姓名"
        is-type="china-name"
      ></x-input>
      <x-input
        title="手机号码"
        v-model="user.phone"
        name="mobile"
        placeholder="请输入手机号码"
        keyboard="number"
        is-type="china-mobile"
      ></x-input>
      <x-address
        title="所在地区"
        v-model="user.region"
        :list="addressData"
        placeholder="请选择地址"
        :show.sync="showAddress"
      ></x-address>
      <x-input title="详细地址" v-model="user.address" placeholder="请输入详细地址"></x-input>
      <x-input title="邮政编码" v-model="user.ZipCode" placeholder="请输入邮编" keyboard="number"></x-input>
      <x-input title="设为默认地址" v-model="user.ZipCode" class="defaultBox">
        <check-icon slot="right" :value.sync="user.default"></check-icon>
      </x-input>
    </group>

    <div class="footerBox" @click="outShow=true">保存并使用</div>
  </div>
</template>

<script>
import {
  XHeader,
  XInput,
  Group,
  XButton,
  Cell,
  CheckIcon,
  XAddress,
  ChinaAddressV4Data
} from 'vux'

export default {
  components: {
    XHeader,
    XInput,
    XButton,
    Group,
    Cell,
    CheckIcon,
    XAddress,
    ChinaAddressV4Data
  },

  data() {
    return {
      userId: '',
      showAddress: false,
      addressData: ChinaAddressV4Data,
      user: {
        name: '',
        phone: '',
        region: [],
        address: '',
        ZipCode: '',
        default: ''
      }
    }
  },
  mounted() {
    this.userId = this.$route.query.id
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.mineInformationBox {
  // 头部导航
  /deep/.headerBox {
    z-index: 9;
    background-color: #fff;
    border-bottom: 2px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 100px;
    }

    .rightBox {
      color: #666;
      font-size: 30px;
    }
  }
  /deep/.contBox {
    .weui-cells {
      margin-top: 0;
    }
    .vux-popup-picker-select {
      text-align: left !important;
      margin-left: 36px;
      .vux-popup-picker-placeholder {
        color: #757575;
      }
      .vux-cell-value {
        color: #757575;
      }
    }
    .defaultBox {
      .weui-cell__bd {
        flex: 0;
      }
    }
    .weui-icon-success:before {
      color: #f60;
    }
  }

  .footerBox {
    margin: 40px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #f60;
    color: #fff;
    border-radius: 20px;
    font-size: 30px;
  }
}
</style>